<template>
  <el-dialog v-model="centerDialogVisible" width="500" align-center>
    <el-tabs stretch="true" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="登录" name="first">
        <div id="pwdLogin">
          <div class="inputBox">
            <el-input class="input" v-model="account" placeholder="请输入账号" />
            <el-input class="input" v-model="password" placeholder="请输入密码" />
          </div>
          <div class="btnBox">
            <el-button class="btn" @click="loginMethod(2)">忘记密码</el-button>
            <el-button class="btn" type="primary" @click="doLogin">登录</el-button>
          </div>
        </div>
        <div id="codeLogin">
          <div class="inputBox">
            <el-input class="input" v-model="account" placeholder="请输入账号" />
            <div id="code">
              <el-input class="input" v-model="identifyCode" placeholder="验证码" />
              <el-button :disabled="disabled" class="btn codeBtn" @click="getAuthCode(1)">
                <span v-if="btnstatus == false">获取验证码</span>
                <span v-else>{{ timenum }}</span>
              </el-button>
            </div>
          </div>
          <div class="btnBox">
            <el-button class="btn" @click="loginMethod(1)">返回</el-button>
            <el-button class="btn" type="primary" @click="doLogin">登录</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册" name="second">
        <div class="inputBox">
          <el-input class="input" v-model="account1" placeholder="请输入您的邮箱账号" />
          <el-input class="input" v-model="password1" placeholder="请设置密码" />
          <el-input class="input" v-model="password2" placeholder="再次确认密码" />
          <div id="code">
            <el-input class="input" v-model="identifyCode" placeholder="验证码" />
            <el-button :disabled="disabled" class="btn codeBtn" @click="getAuthCode(2)">
              <span v-if="btnstatus == false">获取验证码</span>
              <span v-else>{{ timenum }}</span>
            </el-button>
          </div>
        </div>
        <div class="btnBox">
          <el-button class="btn" type="primary" @click="doRegister">注册</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="js" setup>
import { ref } from 'vue'
import { loginModelStore } from '@/stores/loginModel'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'

const account = ref('')
const password = ref('')
const identifyCode = ref('')
const account1 = ref('')
const password1 = ref('')
const password2 = ref('')

const doRegister = () => {
  if (
    account1.value == '' ||
    password1.value == '' ||
    password2.value == '' ||
    identifyCode.value == ''
  ) {
    ElMessage.warning('尚未填写完成，请检查您的注册信息')
  } else if (password1.value != password2.value) {
    ElMessage.warning('两次密码输入不一致，请修改')
  } else {
    ElMessage.success('登录成功')
  }
}

const doLogin = () => {
  if (account.value == '' || password.value == '') {
    ElMessage.warning('账号或密码不能为空')
  } else {
    ElMessage.success('登录成功')
  }
}

let disabled = ref(false)
let btnstatus = ref(false)
let timenum = ref(60)
const timeReduce = () => {
  btnstatus.value = true
  disabled.value = true
  let timeClock = setInterval(function () {
    timenum.value--
    if (timenum.value == 0) {
      btnstatus.value = false
      disabled.value = false
      clearInterval(timeClock)
    }
  }, 1000)
}
const emailRegExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
const getAuthCode = (e) => {
  if (e == 1) {
    if (!emailRegExp.test(account.value)) {
      ElMessage({
        message: '您的邮箱地址格式错误，请仔细检查',
        type: 'warning'
      })
    } else {
      timeReduce(1)
      ElMessage.success('验证码已发送，请查收')
    }
  }
  if (e == 2) {
    if (!emailRegExp.test(account1.value)) {
      ElMessage.warning('您的邮箱地址格式错误，请仔细检查')
    } else {
      timeReduce(2)
      ElMessage.success('验证码已发送，请查收')
    }
  }
}

const loginMethod = (e) => {
  const show1 = document.getElementById('pwdLogin')
  const show2 = document.getElementById('codeLogin')
  if (e == 1) {
    show1.style.display = 'block'
    show2.style.display = 'none'
  }
  if (e == 2) {
    show1.style.display = 'none'
    show2.style.display = 'block'
  }
}

const activeName = ref('first')
// const handleClick = (tab, event) => {
//   //   console.log(tab, event)
// }

const store = loginModelStore()
const { centerDialogVisible } = storeToRefs(store)
</script>

<style scoped>
#pwdLogin {
  display: block;
}
#codeLogin {
  display: none;
}
.inputBox {
  margin: 10px 0 10px 0;
}
.input {
  margin-bottom: 16px;
}
#code {
  display: flex;
}
.btnBox {
  margin-top: 24px;
  text-align: center;
}
.btn {
  width: 36%;
}
.codeBtn {
  margin-left: 10px;
}
.demo-tabs {
  padding: 5% 10% 5% 10%;
}
</style>
